<template>
  <div class="public-page-search">
    <a-card size="small" class="myCard">
      <div style="width: 100%">
        <a-input-group compact>
          <a-select v-model:value="inputType" style="width: 100px" @change="handleSelect">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="call">报警内容</a-select-option>
            <a-select-option value="deal">出警情况</a-select-option>
            <a-select-option value="caseNo">警情单号</a-select-option>
            <a-select-option value="callPhone">报警电话</a-select-option>
            <a-select-option value="callAddress">事发地址</a-select-option>
          </a-select>
          <a-input
            @change="handleSearch"
            v-model:value="inputValue"
            placeholder="请输入关键词"
            class="inputsearch"
          />
        </a-input-group>
        <div style="margin-top: 10px">
          <span style="font-size: 12px">
            注：搜索关键词时支持多重条件。多重条件时，同时包含使用空格分隔，单个包含使用竖线“|”分隔。
          </span>
          <span>
            <a-tooltip placement="right" :overlayStyle="{ maxWidth: '700px' }">
              <template v-slot:title>
                <p>
                  1.如果搜索的内容既包含“盗窃”又包含“电动车”，“盗窃”和“电动车”两词之间用空格分隔。
                </p>
                <span>
                  2.如果搜索的内容包含“盗窃”或“电动车”，“盗窃”和“电动车”两词之间用“|”分隔。
                </span>
              </template>
              <img src="@/assets/jg.svg" alt="" class="jgIcon" />
            </a-tooltip>
          </span>
        </div>
      </div>
    </a-card>
    <supper-select ref="select" @change="supperSelectChange" :options="supperSelectOptions">
      <template v-slot:query>
        <div class="queryform">
          <!-- <a-checkbox @change="handletraffic" style="margin-right: 10px">交通警情</a-checkbox>
          <a-checkbox @change="handleother" style="margin-right: 10px" v-model:checked="checked">
            其他
          </a-checkbox> -->
          <span style="width: 70px">报警时间：</span>
          <picker :data="date" @setTime="handleOk" />
          <a-button type="primary" style="margin-left: 20px" @click="handleQuery">搜索</a-button>
          <a-button style="margin-left: 20px" @click="handleResh">重置</a-button>
        </div>
      </template>
    </supper-select>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted, toRaw } from 'vue';
import SupperSelect from '@/components/supper-select/index.vue';
import { getParamsCodes } from '@/components/supper-select/index.js';
import { queryTime } from '@/api/intelligentanalysis/alert';
import { getInitParams } from '@/views/intelligent-analysis/js/publicQuery';
import { PublicQueryState } from '@/views/intelligent-analysis/typing';
import picker from '@/components/s-picker/picker.vue';
export default defineComponent({
  components: {
    SupperSelect,
    picker,
  },
  emits: ['pageSearchChange', 'onQuery'],
  setup(props, { emit }) {
    const dropdownStyle = ref<any>({
      width: '80px',
    });
    const inputType = ref<string>('');
    const date = ref<any>([]);
    const publicParams = getInitParams('statistics');
    const queryForm: PublicQueryState = reactive({
      ...publicParams,
      dealFlag: '',
      searchType: '1',
      classifyNames: '',
    });
    const supperSelectOptions = [
      {
        type: 'ai',
        visible: false, // 隐藏
      },
    ];
    //日期
    const onChanpige = (a, b) => {
      date.value = b;
    };
    const handleOk = value => {
      queryForm.callTimeStart = value[0];
      queryForm.callTimeEnd = value[1];
      emit('pageSearchChange', queryForm);
    };

    //日期
    const onChange = (a, b) => {
      date.value = b;
      queryForm.callTimeStart = b[0];
      queryForm.callTimeEnd = b[1];
    };
    //选择搜索下拉框
    const handleSelect = value => {
      queryForm.inputType = value;
      emit('pageSearchChange', queryForm);
    };
    //点击搜索图标
    const inputValue = ref<string>('');
    const handleSearch = () => {
      queryForm.inputParams = inputValue.value;
      emit('pageSearchChange', queryForm);
    };
    const supperSelectChange = data => {
      const { jq, fk, xqdw } = getParamsCodes(data);
      queryForm.callSummaryCodes = jq;
      queryForm.dealSummaryCodes = fk;
      queryForm.xqdwCodes = xqdw;
      emit('pageSearchChange', queryForm);
    };
    //搜索
    const handleQuery = () => {
      emit('onQuery', queryForm);
    };
    const checkedTag = ref<string>();

    //tag点击事件
    const parentCode = ref<string>('');
    const handleTag = (el, item) => {
      if (el.code == checkedTag.value) {
        checkedTag.value = '';
        parentCode.value = '';
        queryForm.classifyNames = '';
      } else {
        checkedTag.value = el.code;
        parentCode.value = item.code;
        queryForm.dealFlag = el.attributes.nrFlag;
      }
      emit('pageSearchChange', queryForm);
    };
    //获取时间
    const handlequeryTime = () => {
      queryTime({ module: 'CGFX' }).then(res => {
        const { callTimeStart, callTimeEnd } = res.data;
        date.value[0] = callTimeStart;
        date.value[1] = callTimeEnd;
        queryForm.callTimeStart = callTimeStart;
        queryForm.callTimeEnd = callTimeEnd;
        emit('pageSearchChange', toRaw(queryForm));
      });
    };
    //重置
    const handleResh = () => {
      location.reload();
    };
    //其他
    const handleother = e => {
      if (e.target.checked) {
        queryForm.otherFlag = 'Y';
      } else {
        queryForm.otherFlag = 'N';
      }
      emit('pageSearchChange', toRaw(queryForm));
    };
    const checked = ref<boolean>(true);
    //交通
    const handletraffic = e => {
      if (e.target.checked) {
        queryForm.trafficFlag = 'Y';
      } else {
        queryForm.trafficFlag = 'N';
      }
      emit('pageSearchChange', toRaw(queryForm));
    };
    onMounted(() => {
      handlequeryTime();
    });

    return {
      handleResh,
      handleOk,
      inputType,
      onChange,
      parentCode,
      handleTag,
      checkedTag,
      supperSelectOptions,
      supperSelectChange,
      handleSearch,
      date,
      queryForm,
      dropdownStyle,
      onChanpige,
      handleother,
      handletraffic,
      checked,
      handleQuery,
      inputValue,
      handleSelect,
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.ant-select-selection-item) {
  text-align: center;
}
:deep(.ant-select-item-option-content) {
  text-align: center;
}

:deep(.ant-card-small > .ant-card-body) {
  padding: 0px;
}
.icon-AIjiarengongbiaoqian:before {
  content: '\e6c8';
}
:deep(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
  height: 45px;
  border: 2px solid #3574f6;
  border-right: 0.5px solid #5a5b67;
}
:deep(.antd-wave-shadow-color) {
  border-color: none;
}
:deep(.ant-select-selection-item) {
  position: absolute;
  top: 6px;
}
.inputsearch {
  width: 400px;
  height: 45px;
  border: 2px solid #3574f6;
  border-left: 0.5px solid #5a5b67;
}
.myCard {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  margin-bottom: 20px;
}
.jgIcon {
  width: 14px;
  height: 14px;
}
.supper-type-card {
  & > .ant-col {
    display: flex;
  }
  .type-card-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #e99220;
    font-weight: bold;
    font-size: 14px;
    font-family: Source Han Sans CN;
    text-align: left;
    vertical-align: top;
    & > img {
      margin-right: 5px;
    }
  }
  .type-card-value {
    display: flex;
    align-items: center;
    height: 100%;
    padding-bottom: -10px;
    .type-card-list {
      display: flex;
      flex-flow: wrap;
      width: 100%;
      margin: 11px 0px 0px 11px;
      .type-card-item {
        position: relative;
        margin-right: 4px;
        margin-bottom: 10px;
        padding: 4px 12px;
        color: #ffffff;
        font-weight: 400;
        font-size: 14px;
        font-family: Source Han Sans CN;
        border: 1px solid #845c27;
        &::before {
          position: absolute;
          top: -4px;
          left: -4px;
          z-index: 55;
          display: block;
          width: 8px;
          height: 8px;
          background: #2b2d33;
          border-right: 1px solid #845c27;
          transform: rotate(45deg);
          content: '';
        }
        &.activeEl {
          background: #261601;
        }
        &.active {
          background: #c27818;
        }
        .type-card-item_marker {
          position: absolute;
          right: 2px;
          bottom: 2px;
          width: 0;
          height: 0;
          border-top: 6px solid transparent;
          border-right: 6px solid #845c27;
          border-bottom: 0 solid #845c27;
          border-left: 0 solid #845c27;
        }
      }
    }
  }
}
.queryform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
</style>
